<template>
  <div class="hello">
    <el-input v-model="selectedFile" type="file" @change="fileSelectedChange" id="fileSelect"></el-input>
    <div style="position: relative;">
      <video autobuffer autoplay id="vid" width="300" height="400">
        <source id="mp4" src type="video/mp4" />
      </video>
      <div style="position: absolute;top: 20%;bottom: 20%;right: 50%;left: 30%;">
        <canvas id="canvasPanel" width="300" height="400"></canvas>
      </div>
    </div>
    <p><pre id="result"></pre></p>
  </div>
</template>

<script>
import { fabric } from 'fabric'

export default {
  name: "HelloWorld",
  data() {
    return {
      currentLeft: 0,
      currentTop: 0,
      currentCoverObject: null,
      canvas: null,
      selectedFile: null,
      msg: "Welcome to Your Vue.js App",
      mediaInfo: null,
      MediaInfoModule: null
    };
  },
  methods: {
    loopChangePosition: function(){
      var that = this;
      setInterval(function(){
        that.currentCoverObject.set({left: that.currentLeft++, top: that.currentTop++}).setCoords();
        that.canvas.renderAll();
      },1000/25);
    },
    drawCanvas: function(){
      this.canvas = new fabric.Canvas('canvasPanel');
      this.canvas.selection= false;
      this.canvas.setWidth(300);
      this.canvas.setHeight(400);
      var that = this;
      this.canvas.on({
        'mouse:down': (o) => {
          fabric.Image.fromURL("../../static/img/baidu.gif",function(img){
            img.scale(0.5).set(
              {
                top: o.pointer.y,
                left: o.pointer.x
              }
            );
            that.currentLeft = o.pointer.x;
            that.currentTop = o.pointer.y;
            that.canvas.add(img).setActiveObject(img);
            console.log(img);
            that.currentCoverObject = img;
            that.loopChangePosition();
          });
        },
      })
    },
    fileSelectedChange: function(e) {
      console.log(e);
      var filesId = document.getElementById("fileSelect"); //获取id
      var videoId = document.getElementById("vid");
      console.log(filesId.files);
      var file = filesId.files[0];
      var getUrl = null;
      if (window.createObjectURL != undefined) {
        // basic
        getUrl = window.createObjectURL(file);
      } else if (window.URL != undefined) {
        // mozilla(firefox)
        getUrl = window.URL.createObjectURL(file);
      } else if (window.webkitURL != undefined) {
        // webkit or chrome
        getUrl = window.webkitURL.createObjectURL(file);
      }
      console.log(getUrl);
      videoId.src = getUrl;
      var that = this;
      var MI = new this.MediaInfoModule.MediaInfo();
      var videoblob = document.getElementById('fileSelect').files[0];
      MI.Open(videoblob, function() {
        document.getElementById('result').innerText = MI.Get(that.MediaInfoModule.Stream.Video, 0, 'FrameRate') + '\n';
        MI.Close();
      });
      
    }
  },
  mounted: function() {
    this.MediaInfoModule = window.MediaInfoLib({
      postRun: function() {
        console.log("Loading...Complete");
      }
    });
    this.drawCanvas();
  }
};
</script>

<style scoped>
#vid {
  border: 1px solid #F00;
  position: absolute;
  top: 20%;
  bottom: 20%;
  right: 50%;
  left: 30%;
}
/* #canvasPanel {
  position: absolute;
  top: 20%;
  bottom: 20%;
  right: 50%;
  left: 30%;
} */
</style>
